'use strict';

var filtrate = function($){
    $.fn.hotelFiltrate = function(params,callback){
        var star = parseInt(params.star);
        var min  = parseInt(params.min);
        var max  = parseInt(params.max);
        isNaN(star) ? star = 6 :false;
        // star = star || 6;
        isNaN(min) ? min = 0 :false;
        isNaN(max) ? max = 5 :false;

        var btn = $(this);
        var body = $('body');
        var text = ['¥0','¥150','¥300','¥450','¥600','不限'];
        var init_star,
            init_min,
            init_max;
        btn.on('click',initTemplate);//初始化
        function initTemplate() {
            init_star = $('.reserve').attr('data-star');
            init_min = $('.reserve').attr('data-min');
            init_max = $('.reserve').attr('data-max');
            body.css({overflow:'hidden'});
            // 主容器模板
            var filtrate_template = '<div class="aui-mask aui-mask-in" id="mask"></div>\
                                     <div class="filtrate_box">\
                                       <div class="filtrate_title">\
                                         <div>酒店筛选</div>\
                                         <i class="aui-iconfont aui-icon-correct" id="close_btn"></i>   \
                                       </div>  \
                                     </div>';
            body.append(filtrate_template);
            var filtrate_box = $('.filtrate_box');
            //星级容器
            var star = '<div class="filtrate_action filtrate_star"><div class="action_title">星级:</div><ul><li><i class="iconfont icon-star" data-star="2"></i><p>客栈</p></li><li><i class="iconfont icon-star" data-star="3"></i><p>舒适</p></li><li><i class="iconfont icon-star" data-star="4"></i><p>高档</p></li><li><i class="iconfont icon-star" data-star="5"></i><p>豪华</p></li><li><i class="iconfont icon-star" data-star=""></i><p>不限</p></li></ul></div>';
            filtrate_box.append(star);
            //价格容器
            var money = '<div class="filtrate_action"> <div class="action_title">价格:</div>  <div class="money_action"><ul id="money"></ul><div class="slide-selected"></div><i class="btn_price btn_left"></i><i class="btn_price btn_right"></i></div>  </div>';
            filtrate_box.append(money);

            var money_text = '<ul id="money_text"></ul>';
            $('.money_action').append(money_text);
            var progress_bar = '';
            for(var i=0;i<5;i++){
                progress_bar+='<li></li>';
            }
            var money_li = '';
            for(var j=0;j<=5;j++){
                money_li+='<li>'+text[j]+'</li>';
            }
            $('#money_text').append(money_li);
            var node_site = [];
            var node_site1 = [];
            $('#money').append(progress_bar).find('li').each(function(i){
                node_site[i] = $(this).position().left;
                node_site1[i] = $(this).position().left;
                if($('#money li').length == i + 1){
                    node_site[i+1] = node_site[i] + $(this).width();
                    node_site1[i+1] = node_site1[i] + $(this).width();
                }
            });
            for(var k = 0;k<node_site.length;k++){
                $('#money_text li').eq(k).css('left',node_site[k]-($('#money_text li').eq(k).width()/2));
            }

            $('.filtrate_star i').eq(init_star-=2).addClass('filtrate_star_active');
            $('#money_text li').eq(init_min).addClass('btn_left_true');
            $('#money_text li').eq(init_max).addClass('btn_right_true');
            $('.btn_left').css('left',node_site1[init_min] - ($('.btn_left').width()/2));
            $('.btn_right').css('left',node_site1[init_max] - ($('.btn_right').width()/2));
            $('.slide-selected').css({
                width:node_site1[init_max] - node_site1[init_min] + 'px',
                left:node_site1[init_min] + 'px'
            });
            //滑块特效
            var slide_screen_left,
                slide_width,
                slide_left,
                obj;
            $('.btn_price').each(function(){
                $(this).on({
                    touchstart:function(e) {
                        obj = $(this);
                        slide_screen_left=$('.slide-selected').offset().left;
                        slide_width = $('.slide-selected').width();
                        slide_left = $('.slide-selected').position().left;
                    },
                    touchmove:function(e){
                        var clientX = e.originalEvent.targetTouches[0].pageX;

                        var W = clientX - slide_screen_left;
                        var x = slide_width - W;

                        //不允许左右交换
                        if($('.btn_left').position().left <= $('.btn_right').position().left){
                            obj.css('z-index',0);
                            // //拖动
                            if(obj.hasClass('btn_right') && (slide_width - x + $('.btn_left').position().left + ($('.btn_left').width()/2))<$('#money').width()){
                                $('.slide-selected').css({
                                    width:slide_width - x + 'px'
                                });
                                $(obj).css({
                                    left:W - (obj.width()/2) + slide_left + 'px'
                                });
                            }else if(obj.hasClass('btn_left') && W +slide_left >=0){
                                $('.slide-selected').css({
                                    left:W +slide_left +  'px',
                                    width:x + 'px'
                                });
                                $(obj).css({
                                    left:W - (obj.width()/2) + slide_left + 'px'
                                });
                            }
                        }else{
                            obj.css('z-index',100);
                        }
                    },
                    touchend:function(e){
                        //结束拖动
                        var left_site = $('.btn_left').position().left;
                        var right_site = $('.btn_right').position().left;
                        var left = gain_near(node_site,left_site);
                        var right = gain_near(node_site,right_site);
                        var btn_left = node_site1.indexOf(left);
                        var btn_right = node_site1.indexOf(right);

                        $('#money_text li').removeClass(['btn_left_true','btn_right_true']);
                        $('#money_text li').eq(btn_left).addClass('btn_left_true');
                        $('#money_text li').eq(btn_right).addClass('btn_right_true');
                        init_min = btn_left;
                        init_max = btn_right;

                        $('.btn_left').css('left',left - ($('.btn_left').width()/2));

                        $('.btn_right').css('left',right - ($('.btn_right').width()/2));
                        $('.slide-selected').css({
                            width:right - left + 'px',
                            left:left
                        });
                        if($('.btn_left').position().left == $('.btn_right').position().left){
                            obj.css('z-index',100);
                        }
                    }

                });
                function gain_near(arr,N){
                    return arr.sort(function(a, b) {
                        return Math.abs(a - N) - Math.abs(b - N);
                    })[0];
                }
            });
            //打开动画
            var H = filtrate_box.outerHeight(true);
            filtrate_box.height('0');
            filtrate_box.stop().animate({height:H});
            //星级点击事件
            $('.filtrate_star i').each(function(i){
                $(this).on('click',function(){
                    $('.filtrate_star i').removeClass('filtrate_star_active');
                    init_star = $(this).attr("data-star");
                    $(this).addClass('filtrate_star_active');
                    // init_star = i;
                    // init_star = $(this).attr("StarRate")
                });
            });
            //价格点击
            $('.slide-selected').on('click',function(e){

            });
            //遮罩点击事件
            $('#mask').on('click',close);
            $('#close_btn').on('click',close);
            //关闭
            function close(){
                $('.reserve').attr('data-star',init_star);//星级
                $('.reserve').attr('data-min',init_min);
                $('.reserve').attr('data-max',init_max);

                var ret = {};
                ret.star = $('.filtrate_star_active').next().html();
                ret.min = $('#money_text .btn_left_true').html();
                ret.max = $('#money_text .btn_right_true').html();

                if($(this).attr('id') == 'close_btn') callback(ret);
                filtrate_box.stop().animate({height:0},function(){
                    $('#mask').remove();
                    filtrate_box.remove();
                })
            }
        }
        function init(){
            var ret = {};
            var stars    = ['','','客栈','舒适','高档','豪华','不限'];
            var prices   = ['¥0','¥150','¥300','¥450','¥600','不限'];
            $('.reserve').attr('data-min',min);
            $('.reserve').attr('data-max',max);
            $('.reserve').attr('data-star',star);
            ret.star = stars[star];
            ret.min = prices[min];
            ret.max = prices[max];
            callback(ret);
        }
        init();
    }
}(jQuery);
